[Response Ops] [Rule Form] Add Rule Form Flyout v2 #206685

Zacqary · 2025-01-14T21:18:27Z

Summary

Part of #195211

Replaces the create/edit rule flyout with the new rule flyout

Restores the confirmation prompt before canceling or saving a rule without actions defined.

Also fixes most of the design papercuts in the Actions step:

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

Zacqary · 2025-01-15T17:18:47Z

@elastic/kibana-design This PR is still in draft but could use some feedback on these two design elements as they weren't in the Figma:

I'm particularly unsure about the confirmation screen, it's definitely Not A Flyout Opening A Modal™ but it's also a ton of blank space

MichaelMarcialis · 2025-01-21T18:11:28Z

@elastic/kibana-design This PR is still in draft but could use some feedback on these two design elements as they weren't in the Figma:

Hey, @Zacqary. I'm not certain who the designer was on this, so I'll defer to them if they disagree with any of the following opinions. That said, I'd suggest the following:

Discard changes screenshot

You made mention of not triggering the confirmation modal from the flyout. Is there a compelling reason not to do so? Personally, I'm wondering if it might be a more common/familiar pattern to open a confirmation modal instead of repurposing the content area of the flyout. It'll also be more forgiving for short messages such as this.

No actions configured screenshot

Since it's allowed, I'm wondering if we should change the color="warning" prop on the EuiCallout to the default primary color, to avoid scaring folks. If it's truly just an informational message and not a warning (i.e. nothing is going awry), then we should style it as such. You'll likely also want to change or remove the icon as well.

Additionally, since the message is most relevant at the moment the user leaves the "Actions" step and moves to the "Details" step, perhaps it would make sense to move the callout up towards the top of the flyout (just below the header).

Zacqary · 2025-01-21T20:59:44Z

Additionally, since the message is most relevant at the moment the user leaves the "Actions" step and moves to the "Details" step, perhaps it would make sense to move the callout up towards the top of the flyout (just below the header).

The reason I put the callout on the footer is because it's replacing something the full page Rule Form shows as a confirmation popup. It's a message that we're usually displaying to the user right as they're making the decision to save the rule.

I'm happy to move the callout to the top of the screen, but if flyouts are allowed to open confirmation modals I could also just have it pop up the same modal as the rule page instead.

joana-cps · 2025-01-22T09:53:28Z

Thanks, @MichaelMarcialis for your comment and thoughts. I forgot to add these screens on Figma and missed the notification for the PR review. @Zacqary is now aware that I'm the one responsible for this area.

Discard changes screenshot
Regarding modals and flyouts I agree with avoiding it when we're talking about modals in the middle of a flyout flow, like the action connector and show request for example. Since this is a validation, the most common pattern around kibana is just a simple confirmation modal. The only thing that we need to be aware of is adding the background so the user can only interact with the confirmation modal.

This behavior is already in use if you create/edit a Rule from Observability:

No actions configured screenshot
Let's use the same modal that we use on the Rule page for consistency. We already show that actions are optional in the actions step, this is just a confirmation modal.

This reverts commit 8d58b28.

…-fix'

elasticmachine · 2025-02-03T16:52:53Z

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

elasticmachine · 2025-02-03T16:52:53Z

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

jcger · 2025-02-04T05:43:24Z

src/platform/packages/shared/response-ops/rule_form/src/create_rule_form.tsx

@@ -158,24 +167,30 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
    );
  }

+  const RuleFormUIComponent = isFlyout ? RuleFlyout : RulePage;
+
  return (
    <div data-test-subj="createRuleForm">
      <RuleFormStateProvider
        initialRuleFormState={{


we could take the chance to memo this object to avoid unnecessary rerenders

useMemo is only necessary for variables that actually generate a new object identity. React will only rerender if currentRuleFormUIComponent !== previousRuleFormUIComponent.

RuleFlyout and RulePage are both imported, so their object identities will never change at runtime.

I'd like to avoid overuse of useMemo in our code, so let's try to keep React's architecture in mind before prematurely optimizing.

jcger · 2025-02-04T05:47:36Z

src/platform/packages/shared/response-ops/rule_form/src/create_rule_form.tsx

+          formData: {
+            ...getDefaultFormData({
+              ruleTypeId,
+              name: `${ruleType.name} rule`,


should "rule" be translated?

Yeah probably, didn't catch that in the original code

jcger · 2025-02-04T06:16:07Z

src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx

@@ -584,35 +584,24 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
          </EuiToolTip>
        ) : (
          <Suspense fallback={null}>
-            <EuiIcon size="l" type={actionTypeModel.iconClass} />
+            <EuiToolTip content={actionType?.name}>


If actionType can be nullish, shouldn't we add a default error message? I think it would be an empty tooltip otherwise

jcger · 2025-02-04T08:53:15Z

src/platform/packages/shared/response-ops/rule_form/src/hooks/use_rule_form_steps.tsx

@@ -61,6 +63,11 @@ const getStepStatus = ({
    // Otherwise just mark it as incomplete
    return touchedSteps[step] ? 'danger' : 'incomplete';
  }
+
+  if (isIncomplete) {


should this be unit tested?

darnautov · 2025-02-04T11:35:19Z

The flyout seems too narrow, especially considering the flyout and panel paddings. 🤔

darnautov · 2025-02-04T11:39:42Z

The position of the loading indicator isn’t centered. To reproduce, enable 3G network throttling.

Screen.Recording.2025-02-04.at.12.37.42.mov

darnautov · 2025-02-04T11:43:47Z

I wonder if it is reasonable to unmount the definition step component. If the user goes back, it will have to initialize again.

Screen.Recording.2025-02-04.at.12.41.53.mov

darnautov · 2025-02-04T11:47:24Z

Cases and Observability AI Assistant are the only available connectors. I assume something is wrong.

darnautov · 2025-02-04T12:16:01Z

x-pack/platform/plugins/private/transform/public/alerting/transform_alerting_flyout.tsx


  const AlertFlyout = useMemo(() => {
    if (!triggersActionsUi) return;

    const commonProps = {
-      onClose: () => {
+      plugins,


ML and Transform code changes LGTM, but I noticed some issues during local testing. I’ve left comments on the PR separately.

consulthys

On behalf of @elastic/stack-monitoring I ran this branch locally and here is the error I got when I wanted to open a rule flyout from within Stack Monitoring. Let me know if I'm missing anything.

stack_mon_rule_flyout.mov

Error

The above error occurred in AlertConfiguration:


    at AlertConfiguration (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:10339:5)
    at div
    at AlertPanel (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:11309:5)
    at div
    at EuiResizeObserver (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:122457:81)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiContextMenuPanelClass (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:72694:81)
    at Render (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:159437:82)
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiContextMenuClass (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:72097:81)
    at Render (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:159437:82)
    at div
    at EuiMutationObserver (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:122229:81)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPanel (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:125488:23)
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPopoverPanel (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:126932:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:363591:59
    at FocusLockUI (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:359918:71)
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:360814:60
    at EuiFocusTrapClass (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:97168:81)
    at EuiFocusTrap (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:97162:126)
    at EuiPortalClass (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:127392:81)
    at EuiPortal (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:127386:125)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPopover (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:126169:81)
    at AlertsBadge (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:10127:5)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiFlexItemInternal (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:95802:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiFlexGroupInternal (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:95576:24)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiFlexItemInternal (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:95802:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiFlexGroupInternal (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:95576:24)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPanel (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:125488:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiFlexItemInternal (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:95802:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiFlexGrid (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:95377:23)
    at div
    at ClusterItemContainer (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:23367:30)
    at ElasticsearchPanel (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:22808:30)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPageBody (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:123239:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPage (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:123093:23)
    at Overview (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:23479:41)
    at WrappedSetupModeRenderer (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:36088:5)
    at WrappedComponent (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:36264:139)
    at EnhancedType (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/kibanaReact/1.0.0/kibanaReact.plugin.js:2045:20)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPageBody (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:123239:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPage (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:123093:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at section
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at EuiPageSection (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:123914:23)
    at _EuiPageSection (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:124805:78)
    at main
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at _EuiPageInner (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:124426:23)
    at div
    at http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:164962:73
    at _EuiPageOuter (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:124559:23)
    at _EuiPageTemplate (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:124702:23)
    at PageTemplate (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:18725:3)
    at ClusterOverview (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:14040:73)
    at Route (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:368243:29)
    at Route (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:69819:3)
    at RouteInit (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:18921:3)
    at Switch (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:368445:29)
    at Routes (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:69955:3)
    at RenderedRoute (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:366410:5)
    at Routes (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:366971:5)
    at Router (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:366909:15)
    at CompatRouter (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:364936:5)
    at Router (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:367862:30)
    at Router (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:69912:3)
    at Provider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:82:25)
    at Provider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:82:25)
    at GlobalStateProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:11543:3)
    at Provider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/kibanaReact/1.0.0/kibanaReact.plugin.js:2060:15)
    at ErrorBoundaryInternal (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:69231:5)
    at KibanaErrorBoundary (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:69289:110)
    at KibanaErrorBoundaryProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:69052:3)
    at EuiContext (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:71947:24)
    at IntlProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:243635:47)
    at I18nProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:62831:3)
    at I18nContext (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/core/core.entry.js:24699:9)
    at EuiComponentDefaultsProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:127903:36)
    at CurrentEuiBreakpointProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:153581:23)
    at ThemeProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:165025:63)
    at EuiEmotionThemeProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:158903:23)
    at EuiThemeMemoizedStylesProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:159378:23)
    at EuiThemeProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:159172:22)
    at EuiSystemColorModeProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:128230:23)
    at EuiCacheProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:127824:20)
    at EuiProviderNestedCheck (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:128056:23)
    at EuiProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:128116:25)
    at KibanaEuiProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:67817:3)
    at KibanaRootContextProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:67940:3)
    at KibanaRenderContextProvider (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.js:67716:3)
    at MonitoringApp (http://localhost:5601/zxl/XXXXXXXXXXXX/bundles/plugin/monitoring/1.0.0/monitoring.chunk.2.js:12796:3)

Zacqary · 2025-02-04T15:59:35Z

@darnautov

The flyout seems too narrow, especially considering the flyout and panel paddings. 🤔

Design team has already reviewed and settled on flyout width, feel free to open an issue if this doesn't work for the ML team. Only looking for technical review on this PR.

cnasikas · 2025-02-04T18:23:11Z

If I remember correctly, there is also a request from o11y to make the flyout resizable (for another PR). @joana-cps Wdyt?

cc @maryam-saeidi

cauemarcondes

OBS service changes LGTM

…bana into 195211-replace-flyout

…urce-definitions/scripts/fix-location-collection.ts'

# Conflicts: # x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/alert_rules/custom_status_alert.journey.ts

…bana into 195211-replace-flyout # Conflicts: # x-pack/solutions/observability/plugins/infra/tsconfig.json

# Conflicts: # x-pack/solutions/observability/plugins/observability_logs_explorer/public/components/alerts_popover.tsx # x-pack/solutions/observability/plugins/observability_logs_explorer/tsconfig.json # x-pack/solutions/observability/plugins/slo/tsconfig.json

…apping'

elasticmachine · 2025-02-07T21:59:29Z

💔 Build Failed

Failed CI Steps

Test Failures

[job] [logs] Jest Tests #9 / SLOs Page when the correct license is found when API has returned results allows creating a new rule for an SLO
[job] [logs] Jest Tests #9 / SLOs Page when the correct license is found when API has returned results allows creating a new rule for an SLO

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	1700	1948	+248
`discover`	1094	1340	+246
`infra`	1303	1554	+251
`ml`	2217	2464	+247
`monitoring`	396	673	+277
`observability`	1355	1369	+14
`slo`	1001	1258	+257
`synthetics`	988	1235	+247
`transform`	480	741	+261
`triggersActionsUi`	944	954	+10
`uptime`	571	831	+260
total			+2318

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/alerts-ui-shared`	287	288	+1
`@kbn/response-ops-rule-form`	158	181	+23
`triggersActionsUi`	570	566	-4
total			+20

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`apm`	4.0MB	4.8MB	⚠️ +842.8KB
`discover`	846.7KB	1.7MB	⚠️ +863.5KB
`infra`	1.2MB	2.0MB	⚠️ +862.7KB
`ml`	4.7MB	5.6MB	⚠️ +851.3KB
`monitoring`	515.2KB	1.3MB	⚠️ +862.3KB
`observability`	1.3MB	1.3MB	+18.9KB
`slo`	882.4KB	1.7MB	⚠️ +859.2KB
`stackAlerts`	75.2KB	75.3KB	+132.0B
`synthetics`	918.9KB	1.7MB	⚠️ +854.5KB
`transform`	470.1KB	1.3MB	⚠️ +858.2KB
`triggersActionsUi`	1.7MB	1.7MB	+25.9KB
`uptime`	422.4KB	1.3MB	⚠️ +859.3KB
total			⚠️ +7.6MB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/response-ops-rule-form`	7	6	-1
`triggersActionsUi`	51	49	-2
total			-3

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`apm`	38.4KB	38.6KB	+239.0B
`discover`	44.8KB	44.9KB	+196.0B
`infra`	50.6KB	50.6KB	+63.0B
`ml`	78.0KB	78.5KB	+466.0B
`monitoring`	25.3KB	25.6KB	+303.0B
`observability`	102.4KB	102.4KB	+8.0B
`slo`	43.4KB	43.5KB	+137.0B
`synthetics`	38.5KB	38.6KB	+138.0B
`transform`	19.8KB	20.1KB	+246.0B
`triggersActionsUi`	130.2KB	129.2KB	-1.1KB
`uptime`	55.1KB	55.3KB	+292.0B
total			+1006.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/alerts-ui-shared`	303	304	+1
`@kbn/response-ops-rule-form`	159	182	+23
`triggersActionsUi`	596	592	-4
total			+20

async chunk count

id	before	after	diff
`apm`	61	64	+3
`discover`	27	30	+3
`infra`	29	32	+3
`ml`	110	113	+3
`monitoring`	7	10	+3
`observability`	21	23	+2
`slo`	28	31	+3
`synthetics`	13	16	+3
`transform`	6	9	+3
`triggersActionsUi`	65	67	+2
`uptime`	13	16	+3
total			+31

ESLint disabled line counts

id	before	after	diff
`@kbn/response-ops-rule-form`	4	5	+1

miscellaneous assets size

id	before	after	diff
`apm`	1.3MB	1.7MB	⚠️ +379.0KB
`discover`	847.7KB	1.2MB	⚠️ +379.0KB
`infra`	1.3MB	1.7MB	⚠️ +379.0KB
`ml`	211.1KB	590.2KB	⚠️ +379.0KB
`monitoring`	0.0B	379.0KB	⚠️ +379.0KB
`slo`	695.2KB	1.0MB	⚠️ +379.0KB
`synthetics`	387.0KB	766.1KB	⚠️ +379.0KB
`transform`	0.0B	379.0KB	⚠️ +379.0KB
`uptime`	0.0B	379.0KB	⚠️ +379.0KB
total			⚠️ +3.3MB

Total ESLint disabled count

id	before	after	diff
`@kbn/response-ops-rule-form`	4	5	+1

History

💔 Build #273779 failed 929ce73
💔 Build #273762 failed 0b991bf
💚 Build #272840 succeeded 3772d57
💛 Build #272399 was flaky c4a2c9b

Zacqary mentioned this pull request Jan 14, 2025

[ResponseOps][Rules] Use the new rule form to the create rules flyout #195211

Open

Zacqary force-pushed the 195211-replace-flyout branch 2 times, most recently from c3b25e9 to cbf1333 Compare January 17, 2025 17:36

Zacqary and others added 17 commits January 22, 2025 12:53

Hide close button when show request is open

1ef801c

Use EUI breakpoint variables for container breakpoints

1faf112

Revert "Use EUI breakpoint variables for container breakpoints"

4cb5b1d

This reverts commit 8d58b28.

Decouple RuleForm component from react router

e5b287a

Initially replace flyout in Discover plugin

74f59b7

Replace add/edit rule flyouts with getRuleFormFlyout

dd6e167

Remove missing import

6dd013d

Add isServerless flag to rule flyout

69eb8fa

Fix metadata typing

74d5339

Fix initialMetadata error

646af0f

Add flyout close confirm and no actions callout

d4c91d3

Fix action UI display papercuts

2d61517

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

1ffea47

…-fix'

Fix typecheck

19f2fdc

Fix bundle size

3e9ebe4

Fix typecheck

70d4dab

Lazy load rule form component from response ops package

9c4d831

botelastic bot added Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team Team:obs-ux-management Observability Management User Experience Team labels Feb 3, 2025

Zacqary enabled auto-merge (squash) February 3, 2025 18:51

darnautov self-requested a review February 4, 2025 08:47

jcger reviewed Feb 4, 2025

View reviewed changes

darnautov reviewed Feb 4, 2025

View reviewed changes

consulthys requested changes Feb 4, 2025

View reviewed changes

cnasikas self-requested a review February 4, 2025 15:09

cauemarcondes approved these changes Feb 5, 2025

View reviewed changes

Zacqary added 3 commits February 5, 2025 10:58

Replace getRuleFormFlyout with RuleFormFlyoutLazy

319f869

Ensure all solutions use required plugins for rule form

99c4dba

Merge branch '195211-replace-flyout' of https://github.com/Zacqary/ki…

9298807

…bana into 195211-replace-flyout

Zacqary requested a review from a team as a code owner February 5, 2025 18:58

kibanamachine and others added 4 commits February 5, 2025 19:12

[CI] Auto-commit changed files from 'ts-node .buildkite/pipeline-reso…

0b991bf

…urce-definitions/scripts/fix-location-collection.ts'

Fix i18n

732ce23

Merge remote-tracking branch 'upstream/main' into 195211-replace-flyout

4539f97

# Conflicts: # x-pack/solutions/observability/plugins/synthetics/e2e/synthetics/journeys/alert_rules/custom_status_alert.journey.ts

Merge branch '195211-replace-flyout' of https://github.com/Zacqary/ki…

929ce73

…bana into 195211-replace-flyout # Conflicts: # x-pack/solutions/observability/plugins/infra/tsconfig.json

jloleysens approved these changes Feb 6, 2025

View reviewed changes

Zacqary and others added 3 commits February 7, 2025 11:21

Fix infra type imports

e9948a2

[CI] Auto-commit changed files from 'node scripts/styled_components_m…

699300b

…apping'

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Response Ops] [Rule Form] Add Rule Form Flyout v2 #206685

[Response Ops] [Rule Form] Add Rule Form Flyout v2 #206685

Zacqary commented Jan 14, 2025 •

edited

Loading

Zacqary commented Jan 15, 2025

MichaelMarcialis commented Jan 21, 2025

Zacqary commented Jan 21, 2025

joana-cps commented Jan 22, 2025

elasticmachine commented Feb 3, 2025

elasticmachine commented Feb 3, 2025

jcger Feb 4, 2025

Zacqary Feb 4, 2025

jcger Feb 4, 2025

Zacqary Feb 4, 2025

jcger Feb 4, 2025

jcger Feb 4, 2025

darnautov commented Feb 4, 2025

darnautov commented Feb 4, 2025

darnautov commented Feb 4, 2025

darnautov commented Feb 4, 2025

darnautov Feb 4, 2025

consulthys left a comment •

edited

Loading

Zacqary commented Feb 4, 2025

cnasikas commented Feb 4, 2025

cauemarcondes left a comment

elasticmachine commented Feb 7, 2025 •

edited

Loading

API count

async chunk count

ESLint disabled line counts

miscellaneous assets size

Total ESLint disabled count

[Response Ops] [Rule Form] Add Rule Form Flyout v2 #206685

Are you sure you want to change the base?

[Response Ops] [Rule Form] Add Rule Form Flyout v2 #206685

Conversation

Zacqary commented Jan 14, 2025 • edited Loading

Summary

Checklist

Zacqary commented Jan 15, 2025

MichaelMarcialis commented Jan 21, 2025

Discard changes screenshot

No actions configured screenshot

Zacqary commented Jan 21, 2025

joana-cps commented Jan 22, 2025

elasticmachine commented Feb 3, 2025

elasticmachine commented Feb 3, 2025

jcger Feb 4, 2025

Choose a reason for hiding this comment

Zacqary Feb 4, 2025

Choose a reason for hiding this comment

jcger Feb 4, 2025

Choose a reason for hiding this comment

Zacqary Feb 4, 2025

Choose a reason for hiding this comment

jcger Feb 4, 2025

Choose a reason for hiding this comment

jcger Feb 4, 2025

Choose a reason for hiding this comment

darnautov commented Feb 4, 2025

darnautov commented Feb 4, 2025

darnautov commented Feb 4, 2025

darnautov commented Feb 4, 2025

darnautov Feb 4, 2025

Choose a reason for hiding this comment

consulthys left a comment • edited Loading

Choose a reason for hiding this comment

Zacqary commented Feb 4, 2025

cnasikas commented Feb 4, 2025

cauemarcondes left a comment

Choose a reason for hiding this comment

elasticmachine commented Feb 7, 2025 • edited Loading

💔 Build Failed

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

async chunk count

ESLint disabled line counts

miscellaneous assets size

Total ESLint disabled count

History

Zacqary commented Jan 14, 2025 •

edited

Loading

consulthys left a comment •

edited

Loading

elasticmachine commented Feb 7, 2025 •

edited

Loading